<template>
	<div class="v-c-page v-c-nav">
		<div class="d-flex d-flex-between d-flex-middle px20 mb15 mt20">
            <div class="d-flex a-center j-start weight main-color">
				部门列表
			</div>
			<a-button type="primary" class="radius6" @click="addModal(0)">新增部门</a-button>
		</div>
		<div class="table-wrapper">
			<a-table
              rowKey="id"
              :columns="columns"
              :pagination="false"
              :scroll="{ x: '1000px'}"
              tableLayout="auto"
              :loading="tableLoading"
              :data-source="tableData"
              @expandedRowsChange="changeExand"
              :expanded-row-keys="expandedRowKeys"
            >
				<template v-slot:bodyCell="{column,record,index}">
					<template v-if="column.dataIndex === 'operate'">
						<button class="ant-btn ant-btn-success is-plain sm mr10" @click="addModal(record.id)"><span>增加子分类</span></button>
						<button class="ant-btn ant-btn-primary is-plain sm mr10" @click="editModal(record)"><span>编辑</span></button>
						<a-popconfirm
							title="确定禁用该用户？"
							ok-text="禁用"
							cancel-text="取消"
							@confirm="deleteDept(record.id)"
						>
						<button class="ant-btn ant-btn-danger is-plain sm"><span>删除</span></button>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</div>
        <a-modal width="320px" centered v-model:open="modalVisible" :maskClosable="false" class="c-modal">
			<template #title>
				<div class="hd">添加部门</div>
			</template>
			<template #footer>
				<div class="d-flex d-flex-center mb10">
					<a-button :loading="btnStatus" class="d-flex-item" type="primary" size="large" @click="save">{{ btnStatus?'正在保存...':'保存' }}</a-button>
				</div>
			</template>
			<div class="d-flex d-flex-middle mb10">
				<span class="lbl">部门名称</span>
				<a-input v-model:value="form.departmentName" placeholder="请输入部门名称" />
			</div>
		</a-modal>
	</div>
</template>
<script setup lang="ts">
import { reactive,ref,onMounted,computed } from 'vue';
// import { tool } from '@/api/common/common';
import { message } from 'ant-design-vue';
import { spinLoading } from '@/components/spin-loading';
let btnStatus = ref(false);
let modalVisible = ref(false)
const expandedRowKeys = ref([]);
function changeExand(val) {
    expandedRowKeys.value = val;
}
// ------------------------- 分类列表 ---------------------------
const columns = reactive([
  {
    align:'left',
		title: '部门',
		dataIndex: 'name'
  },{
    align:'left',
		title: '部门负责人',
		dataIndex: 'managerName'
  },{
    align:'left',
		title: '操作',
		dataIndex: 'operate',
	}
]);
// -----------------------------------------
const formDefault = {
    id:'',
    parentId:0,
    departmentName:''
}
let form = reactive({ ...formDefault})
// -----------------------------------------
function addModal(parentId){
    Object.assign(form, formDefault);
    form.parentId = parentId
    modalVisible.value = true
}
function editModal(dept){
    form.id = dept.id
    form.parentId = dept.parentId
    form.departmentName = dept.departmentName
    modalVisible.value = true
}
function closeModal(){
    modalVisible.value = false
}
// -------------------------------------------
const tableData = ref([]);
const tableLoading = ref(false);
const total = ref(0);
async function ajaxQuery() {
    try {
      tableLoading.value = true;
      // let responseModel = await tool.deptList({});
      const data = [
        {"departmentId": 2,"name": "开发部","managerName": "卓大","managerId": 44,"parentId": 1,"sort": 1000},
        {"departmentId": 3,"name": "产品部","managerName": "胡克","managerId": 2,"parentId": 1,"sort": 99},
        {"departmentId": 4,"name": "销售部","managerName": "清野","managerId": 64,"parentId": 1,"sort": 9},
        {"departmentId": 1,"name": "1024创新实验室","managerName": "管理员","managerId": 1,"parentId": 0,"sort": 1},
        {"departmentId": 5,"name": "测试部","managerName": "琴酒","managerId": 48,"parentId": 1,"sort": 0},
        {"departmentId": 6,"name": "123","managerName": "开云","managerId": 63,"parentId": 2,"sort": 0}
      ];
      let menu = data.filter((r) => r.parentId == 1);
      menu.forEach((r) => {
        let c = data.filter((rr) => rr.parentId == r.departmentId);
        if(c.length) r.children = c
      });
      tableData.value = menu;
    } catch (e) {
      console.log(e)
    } finally {
      tableLoading.value = false;
    }
}
async function save(){
    if(form.departmentName == ''){
		message.error('请输入部门名称！')
		return
	}
    try {
		btnStatus.value = true
		await tool.deptEdit(form);
		modalVisible.value = false
		ajaxQuery()
	} catch (e:any) {
		message.error(e.message)
	} finally {
		btnStatus.value = false
	}
}
async function deleteDept(pid:any){
	try {
    spinLoading.show()
    await tool.deptEdit({'delete':pid})
		ajaxQuery();
    message.success('删除成功！')
	} catch (e:any) {
		message.error(e.message)
	} finally {
		spinLoading.hide()
	}
}
onMounted(()=>{
	ajaxQuery()
})
</script>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'department',
})
</script>